<template>
  <el-dialog ref="drawer" :title="title" :visible.sync="drawer" destroy-on-close @close="clodeModel">
    <div v-if="drawer" class="draw-body">
      <div class="wise-form">
        <el-form ref="ruleForm" :model="object" :rules="rules" :validate-on-rule-change="false" label-width="130px"
          label-suffix=":">
          <el-form-item label="项目名称" prop="name">
            <!-- <el-input v-model="object.name" placeholder="请输入项目名称" :maxlength="100" show-word-limit clearable autofocus /> -->
            <span>{{ object.name }}</span>
          </el-form-item>
          <el-form-item label="项目编号" prop="welderNumber">
            <el-input v-model="object.welderNumber" placeholder="请输入项目编号" :maxlength="100" show-word-limit clearable
              autofocus />
          </el-form-item>
          <el-form-item label="项目地址" prop="area">
            <wise-region v-model="object.area" :obj-keys="[
                {
                  field: 'province',
                  key: 'province',
                  value: 'key',
                },
                {
                  field: 'provinceName',
                  key: 'province',
                  value: 'value',
                  tableShow: true,
                },
                {
                  field: 'city',
                  key: 'city',
                  value: 'key',
                },
                {
                  field: 'cityName',
                  key: 'city',
                  value: 'value',
                  tableShow: true,
                },
                {
                  field: 'country',
                  key: 'area',
                  value: 'key',
                },
                {
                  field: 'countryName',
                  key: 'area',
                  value: 'value',
                  tableShow: true,
                },
                {
                  field: 'street',
                  key: 'town',
                  value: 'key',
                },
                {
                  field: 'streetName',
                  key: 'town',
                  value: 'value',
                  tableShow: true,
                },
              ]" @on-value="setValue" />
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="object.address" placeholder="请输入详细地址" :maxlength="100" show-word-limit clearable
              autofocus />
          </el-form-item>
          <el-form-item label="经度" prop="longitude">
            <el-input-number v-model="object.longitude" placeholder="请输入经度" :maxlength="100" show-word-limitclearable
              autofocus />
          </el-form-item>
          <el-form-item label="纬度" prop="latitude">
            <el-input-number v-model="object.latitude" placeholder="请输入纬度" :maxlength="100" show-word-limitclearable
              autofocus />
          </el-form-item>
          <el-form-item label="项目开始时间" prop="startTime">
            <wise-date v-model="object.startTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" />
          </el-form-item>
          <el-form-item label="项目结束时间" prop="endTime">
            <wise-date v-model="object.endTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" />
          </el-form-item>

          <el-form-item label="工艺规程编号" prop="craftsId">
            <el-select v-model="object.craftsId" filterable clearable placeholder="请选择工艺规程编号">
              <el-option v-for="item in craftsInfoList" :key="item.id" :label="item.craftsNumber" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item v-if="object.hotProgramInfo" label="动火方案" prop="hotProgramInfo.name">
            <!-- <el-select v-model="object.hotId" filterable clearable placeholder="请选择动火方案" disabled>
              <el-option v-for="item in hotPlanData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select> -->
            <el-input v-model="object.hotProgramInfo.name" disabled />
          </el-form-item>

          <el-form-item label="动火等级" prop="hotLevel">
            <el-input v-model="object.hotLevel" placeholder="请输入动火等级" :maxlength="100" show-word-limitclearable
              autofocus />
          </el-form-item>

          <el-form-item label="动火作业单位" prop="hotEntName">
            <el-input v-model="object.hotEntName" placeholder="请输入动火作业单位" :maxlength="100" show-word-limitclearable
              autofocus />
          </el-form-item>

          <el-form-item label="生产计划" prop="repairMethod">
            <el-input v-model="object.repairMethod" placeholder="请输入生产计划" :maxlength="100" show-word-limitclearable
              autofocus />
          </el-form-item>

          <el-form-item label="焊口总数量" prop="weldAllNumber">
            <el-input-number v-model="object.weldAllNumber" placeholder="请输入焊口总数量" :maxlength="100"
              show-word-limitclearable autofocus />
          </el-form-item>

          <el-form-item label="焊口完成数量" prop="weldFinshNumber">
            <el-input-number v-model="object.weldFinshNumber" placeholder="请输入焊口完成数量" :maxlength="100"
              show-word-limitclearable autofocus />
          </el-form-item>

          <el-form-item label="纵焊缝总数量" prop="portraitWeldAllNumber">
            <el-input-number v-model="object.portraitWeldAllNumber" placeholder="请输入焊口完成数量" :maxlength="100"
              show-word-limitclearable autofocus />
          </el-form-item>

          <el-form-item label="纵焊缝完成数量" prop="portraitWeldFinshNumber">
            <el-input-number v-model="object.portraitWeldFinshNumber" placeholder="请输入焊口完成数量" :maxlength="100"
              show-word-limitclearable autofocus />
          </el-form-item>

          <el-form-item label="环焊缝总数量" prop="cinctureWeldAllNumber">
            <el-input-number v-model="object.cinctureWeldAllNumber" placeholder="请输入焊口完成数量" :maxlength="100"
              show-word-limitclearable autofocus />
          </el-form-item>

          <el-form-item label="环焊缝完成数量" prop="cinctureWeldFinshNumber">
            <el-input-number v-model="object.cinctureWeldFinshNumber" placeholder="请输入焊口完成数量" :maxlength="100"
              show-word-limitclearable autofocus />
          </el-form-item>
          <el-form-item label="大屏名称" prop="screenName">
            <el-input v-model="object.screenName" placeholder="请输入大屏名称" :maxlength="100" show-word-limitclearable
              autofocus />
          </el-form-item>
          <el-form-item label="大屏Logo" prop="logo">
            <wise-file v-model="object.logo" upload-type="image" :limit="1" :max-file-size="100 * 1024 * 1024" />
          </el-form-item>
          <!-- <el-form-item label="施工方案" prop="construction">
            <wise-file v-model="object.construction" upload-type="file" :limit="1" />
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import WiseFile from '@/components/Crud/components/wiseFile'
  import WiseRegion from '@/components/Crud/components/wiseRegion'
  import WiseDate from '@/components/Crud/components/wiseDate'
  import {
    postHandle
  } from '@/api'
  export default {
    components: {
      WiseRegion,
      WiseDate,
      WiseFile
    },
    data() {
      return {
        urls: {
          list: '/api/v1/welder-sbtx-second/project-info-comb/list',
          add: '/api/v1/welder-sbtx-second/project-info-comb/create',
          show: '/api/v1/welder-sbtx-second/project-info-comb/show/',
          update: '/api/v1/welder-sbtx-second/project-info-comb/update/'
        },
        title: '创建项目',
        drawer: false,
        object: {
          area: null,
          name: null,
          screenName: null,
          logo: null,
          serialNum: null,
          province: null,
          city: null,
          country: null,
          street: null,
          provinceName: null,
          cityName: null,
          countryName: null,
          streetName: null,
          address: null,
          companyName: null,
          manager: null,
          typeCode: null,
          phone: null,
          file: [],
          remark: null,
          craftsId: null,
          welderNumber: null,
          userId: null,
          startTime: '',
          endTime: '',
          hotLevel: null,
          hotEntName: null,
          repairMethod: null,
          weldAllNumber: null,
          weldFinshNumber: null,
          portraitWeldAllNumber: null,
          portraitWeldFinshNumber: null,
          cinctureWeldAllNumber: null,
          cinctureWeldFinshNumber: null,
          construction: null,
          hotId: null,
          longitude: null,
          latitude: null
        },
        rules: {
          name: [{
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }],
          welderNumber: [{
            required: true,
            message: '请输入项目编号',
            trigger: 'blur'
          }],
          area: [{
            required: false,
            message: '请选择地址',
            trigger: 'blur'
          }],
          address: [{
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }],
          startTime: [{
            required: true,
            message: '请选择项目开始时间',
            trigger: 'blur'
          }],
          endTime: [{
            required: true,
            message: '请选择项目结束时间',
            trigger: 'blur'
          }],
          hotLevel: [{
            required: true,
            message: '请输入动火等级',
            trigger: 'blur'
          }],
          hotEntName: [{
            required: true,
            message: '请输入动火作业单位',
            trigger: 'blur'
          }],
          repairMethod: [{
            required: true,
            message: '请输入生产计划',
            trigger: 'blur'
          }],
          hotId: [{
            required: false,
            message: '请输入动火方案',
            trigger: 'change'
          }],
          screenName: [{
            required: true,
            message: '请输入大屏名称',
            trigger: 'blur'
          }]
        },
        craftsInfoList: [],
        hotPlanData: [],
        initiateProjectId: null
      }
    },

    computed: {
      entSpaceId() {
        return this.$store.getters.entSpaceId
      }
    },
    created() {
      this.getHotPlan()
      this.getCraftsInfoList()
    },
    methods: {

      //关闭弹框
      clodeModel() {
       
        this.$refs['ruleForm'].resetFields()
      },
      // 动火方案
      getHotPlan() {
        let params = {
          d: {
            filters: [{
                field: 'entSpaceId',
                operator: 'EQUALS',
                value: this.entSpaceId
              },
              {
                field: 'confirmStatus',
                operator: 'EQUALS',
                value: 1
              }
            ],
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        postHandle(`/api/v1/welder-sbtx-second/hot-program-comb/list`, params).then(res => {
          this.hotPlanData = res.result
        })
      },
      editHandle(row) {
        this.title = '编辑项目'
        this.object = {
          area: null,
          name: null,
          screenName: null,
          logo: null,
          serialNum: null,
          province: null,
          city: null,
          country: null,
          street: null,
          provinceName: null,
          cityName: null,
          countryName: null,
          streetName: null,
          address: null,
          companyName: null,
          manager: null,
          typeCode: null,
          phone: null,
          file: [],
          remark: null,
          craftsId: null,
          welderNumber: null,
          userId: null,
          startTime: '',
          endTime: '',
          hotLevel: null,
          hotEntName: null,
          repairMethod: null,
          weldAllNumber: null,
          weldFinshNumber: null,
          portraitWeldAllNumber: null,
          portraitWeldFinshNumber: null,
          cinctureWeldAllNumber: null,
          cinctureWeldFinshNumber: null,
          construction: null,
          hotId: null,
          longitude: null,
          latitude: null
        }
        this.fileList = []
        this.getObjectById(row.id)
        this.getCraftsInfoList()
        this.drawer = true
      },
      getObjectById(id) {
        this.fileList = []
        postHandle(this.urls.show + id, {}).then(response => {
          this.object = response.result
          this.object.area = {
            province: {
              key: this.object.province,
              value: this.object.provinceName
            },
            city: {
              key: this.object.city,
              value: this.object.cityName
            },
            area: {
              key: this.object.country,
              value: this.object.countryName
            },
            town: {
              key: this.object.street,
              value: this.object.streetName
            }
          }
        })
      },
      getCraftsInfoList() {
        const req = {
          d: {
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        postHandle('/api/v1/welder-sbtx-second/crafts-info-comb/list', req).then(response => {
          const data = response.result
          this.craftsInfoList = data
        })
      },
      setValue(objVal) {
        if (objVal && objVal.length > 0) {
          objVal.forEach(item => {
            this.$set(this.object, item.field, item.value)
          })
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let url
            if (this.object.id) {
              url = this.urls.update + this.object.id
            } else {
              url = this.urls.add
            }
            postHandle(url, {
                obj: {
                  ...this.object,
                  initiateProjectId: this.initiateProjectId
                }
              })
              .then(response => {
                this.$message('操作成功')
                this.drawer = false
                if (this.object.id) {
                  this.$emit('refreshTable')
                } else {
                  this.$router.push({
                    name: 'CreateProject'
                  })
                }
              })
              .catch(error => {
                const data = error.response.data
                for (const key in data) {
                  this.$message.error(this.$t(key + '.' + data[key]))
                }
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }

    }
  }
</script>

<style lang="scss" scoped></style>